<script setup lang="ts">
import { ref, reactive } from 'vue'
import { Tooltip, useTooltip } from '@/widgets'
const cc = ref<HTMLElement>()
const colors = reactive([
  'primary',
  'success',
  'info',
  'warning',
  'danger',
  'white',
  'link',
  'light',
  'dark',
  'black',
  'text'
])

useTooltip(cc, { content: 'CCCCC', placement: 'left' })
</script>
<template>
  <div class="tooltip-example pane-block">
    <div class="blocks">
      <div class="block">
        <Tooltip content="top">
          <button class="button">normal</button>
        </Tooltip>
        <Tooltip content="left" placement="left">
          <button class="button">normal</button>
        </Tooltip>
        <Tooltip content="right" placement="right">
          <button class="button">normal</button>
        </Tooltip>
        <Tooltip content="bottom" placement="bottom">
          <button class="button">normal</button>
        </Tooltip>
      </div>
      <div class="block" v-for="color in colors" :key="`tt-block-${color}`">
        <Tooltip content="top" placement="top" :theme="color">
          <button :class="`button is-light is-${color}`">{{ color }}</button>
        </Tooltip>
        <Tooltip content="left" placement="left" :theme="color">
          <button :class="`button is-light is-${color}`">{{ color }}</button>
        </Tooltip>
        <Tooltip content="right" placement="right" :theme="color">
          <button :class="`button is-light is-${color}`">{{ color }}</button>
        </Tooltip>
        <Tooltip content="bottom" placement="bottom" :theme="color">
          <button :class="`button is-light is-${color}`">{{ color }}</button>
        </Tooltip>
      </div>
    </div>
    <div>
      <button class="button" ref="cc">use Tooltip</button>
    </div>
  </div>
</template>
<style lang="scss">
@import '@/widgets/var';
.tooltip-example {
  .blocks {
    display: flex;
    flex-direction: row;
    .block {
      display: flex;
      flex-direction: column;
      &:not(:last-child) {
        margin-right: 1em;
      }
    }
  }

  // height: 200px;
  .button {
    display: block;
    margin-top: 1em;
  }
}
</style>
